<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>余量查询</title>
  <script src="./js/jquery.min.js" charset="utf-8"></script>
  <script src="./js/tool.js" charset="utf-8"></script>
  <script src="./js/rem.js" charset="utf-8"></script>
  <script src="./js/vue.min.js" charset="utf-8"></script>
  <script src="./js/axios.min.js"></script>
  <link rel="stylesheet" href="./css/normalize.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div id="app" class="container" v-cloak>
    <div class="bindPhone panel animated" v-bind:class="{hidden:isActive}">
      <div class="b_container">
        <a href="javascript:void(0);" v-on:click=""><img src="./img/close.png" alt=""></a>
        <p>您还未绑定手机号</p>
        <p>点击按钮绑定手机号</p>
        <p><a href="javascript:void(0);" v-on:click="">绑定手机号</a></p>
      </div>
    </div>
    <div class="followWechat panel animated" v-bind:class="{hidden:isActive}">
      <div class="b_container">
        <a href="javascript:void(0);" v-on:click=""><img src="./img/close.png" alt=""></a>
        <p>您当前还未关注山东的公众号</p>
        <p><img src="./img/aaaa.png" alt=""></p>
        <p>长按图片识别公众号二维码</p>
      </div>
    </div>
    <header>
      <p class="font-14 c_3f">当前套餐：{{ package_top | netListGet}}</p>
    </header>
    <div class="flow_banner">
      <p>
        <img src="./img/flow_query.png" alt="">
      </p>
    </div>
    <article>
      <div>
        <p class="font-14"><img alt=""></p>
        <ul v-for="detail of detailLists">
          <li class="c_gray">{{detail.discntName}}
            <!-- <a href="#">结转流量</a> -->
          </li>
          <li>
            <!-- <b class="dete_time">月底失效</b> -->
          </li>
          <li class="c_3f clear"><span>共{{detail.discntTotal }}，已用{{detail.discntUse }}</span><span class=" font-14">剩余<b class="c_org">{{detail.discntLeft}}</b></span></li>
          <li v-bind:class="changeColor(detail.discntLeft)">
            <!-- <transition @after-enter="transitionComplete"> -->
            <div class="animated  slideInLeft " v-bind:style="changeProgress(detail.discntTotal,detail.discntLeft)"></div>
            <!-- </transition> -->
            <!-- v-bind:style="changeProgress(detail.d_flow_total,detail.d_flow_leave)" -->
          </li>
        </ul>
      </div>
    </article>

    <div class="pro_warning">
      <p>
        <span class="c_3f">注：</span>
      </p>
      <p class="c_gray">
        1.本页数据包含套餐内产品、赠送产品、流量包产品等当前生效产品的使用情况，供您参考，详细内容以当地营业厅查询为准。
      </p>
      <p class="c_gray">
        2.如您在产品规定的使用范围外使用，将按照标准资费计费，请注意。
      </p>
    </div>
    <!-- <div class="share_partner">
            <a href="#">分享给朋友</a>
        </div> -->
    <div class="extral_service">
      <p class="font-14 c_gray">您可能需要：</p>
      <ul>
        <li v-for="pack of morePackLists">
          <div>
            <img v-bind:src="pack.c_logo" alt="">
            <div>
              <p class="font-14">{{pack.c_type}}</p>
              <p>{{pack.c_detial}}</p>
            </div>
            <span>服务</span>
          </div>
        </li>
      </ul>

    </div>
    <div class="heart_info">
      <p><span>温馨提示：</span></p>
      <ul>
        <li>
          1.此界面仅为您提供当月余量信息查询。
        </li>
        <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
        <ol v-show="showDetailClass">
          <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
          <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
          <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
          <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
        </ol>
      </ul>
    </div>
    <div class="know_more">
      <a href="javascript:void(0)" class="font-12" v-on:click="showRulerDetails()" v-show="!showDetailClass">点击了解更多 &gt;</a>
    </div>
  </div>
</body>
<script>
  const KB = 1024;
  const MB = 1024 * 1024;
  const GB = 1024 * 1024 * 1024;
  //newList添加新信息
  var netList = [{
    type: '02',
    val: '2、3G号码'
  }];
  //业务类型的添加
  var packList = [{
      type: '04',
      val: {
        "d_type": "4G上网流量值",
        "d_logo": "./img/flow.png",
        "details": [],
        "unit": 'MB'
      }
    },
    {
      type: '09',
      val: {
        "d_type": "结转流量",
        "d_logo": "./img/flow.png",
        "details": [],
        "unit": 'MB'
      }
    },
    {
      type: '01',
      val: {
        "d_type": "语音电话时长",
        "d_logo": "./img/tel.png",
        "details": [],
        "unit": '分钟'
      }
    },
    {
      type: '02',
      val: {
        "d_type": "短信条数",
        "d_logo": "./img/tel.png",
        "details": [],
        "unit": '条'
      }
    }, {
      type: '08',
      val: {
        "d_type": "彩信条数",
        "d_logo": "./img/tel.png",
        "details": [],
        "unit": '条'
      }
    },
    {
      type: '05',
      val: {
        "d_type": "M个数",
        "d_logo": "./img/tel.png",
        "details": [],
        "unit": '个'
      }
    },
    {
      type: '06',
      val: {
        "d_type": "T个数",
        "d_logo": "./img/tel.png",
        "details": [],
        "unit": '个'
      }
    },
    {
      type: '7',
      val: {
        "d_type": "可视电话数",
        "d_logo": "./img/tel.png",
        "details": [],
        "unit": '分钟'
      }
    }
  ];

  Vue.filter('getFlow', function(val, index, obj) {

    switch (obj.FlowType) {
      case '01':
        console.log(val / KB);
        val = val / KB >= 1 ? (val / KB).toFixed(2) + "GB" : val + 'MB';

        break;
      case '02':
        val += '分钟';
        break;
      case '03':
        val += '分钟';
        break;
      default:

    }
    return val;
  })
  Vue.filter('useFlow', function(value) {
    // console.log(value);
    var unit = value.slice(-2);
    // console.log(unit);
    return value.slice(-2);
  })

  Vue.filter('netListGet', function(val) {



    return val + '套餐';
  })


  var vm = new Vue({
    el: '#app',
    data: {
      //个人数据请求接口
      person_url: './json/_personpack.json',
      person_data: {
        typeStr: 'queryPackageBalance',
        openId: 'ouxkWt1L2Mnb4IRJK6jf9BcLoTw8'
      },
      isActive:false,
      panelSwaper2:false,
      //相应套餐请求接口
      pack_url: './json/_morepack.json',
      pack_data: {},
      queryInfoServlet_data: {},
      queryInfoServlet_url: './json/_infoServlet.json',
      //套餐详情
      package_details: '',
      package_changes: '',
      package_top: '',
      showDetailClass: false,
      packageBalance: '',
      prog: {
        width: 0
      },
    },
    mounted() {
      this.$nextTick(function() {
        // 页面初始化时调用的函数
        this.updateData();
      });
    },
    computed: {
      detailLists() {
        return this.package_details;
      },
      morePackLists() {
        return this.package_changes;
      }

    },

    methods: {
      //显示规则详细
      showRulerDetails: function(target) {
        this.showDetailClass = true;
      },
      //判断状态值
      judgeStatus: function(res) {
        var context = this;
        if (!res) {
          console.log('未获取到数据');
          return;
        }
        type = res.status;
        context.package_top = res.netType;
        //时间
        context.package_details = res.discntInfo;
        // 处理数据，将数据分类
        console.log(res.nettype);
        console.log(context.package_details);
        packageBalance = res.discntInfo;
        //sconsole.log(packageBalance);
      },
      updateData: function() {
        var context = this;

        function getPerson() {
          return axios.post(context.person_url, context.person_data);
        }

        function getMore() {
          return axios.post(context.pack_url, context.pack_data);
        }

        function get10010() {
          return axios.post(context.queryInfoServlet_url, context.queryInfoServlet_data);
        }
        // 并发请求
        axios.all([getMore(), get10010()]).then(axios.spread(function(res_more, res_10010) {
          // 两个请求现在都执行完成
          // console.log(res_person);
          // console.log(res_more);
          if (200 == res_more.status) {
            context.package_changes = res_more.data.res;
          }
          //调用判断状态的函数
          if (200 == res_10010.status) {
            var data = res_10010.data;
            // 处理数据
            for (let val of data.discntInfo) {
              packList.map(function(elem, index, arr) {
                if (Number(val.discntType) == Number(elem.type)) {
                  elem.val.details.push(val);
                }
              });
            }

            console.log(context.panelSwaper);
            if ('1' == data.subscribe && Boolean(data.phone)) {
              context.judgeStatus(data);
            } else if (!Boolean(data.phone)) {
              vm.$set(context.panelSwaper, 0, {
                'animated': true,
                'hidden': false,
                'show':true,

              });
              alert('未绑定');
            } else if ('1' != data.subscribe) {
              vm.$set(context.panelSwaper, 1, {
                'animated': true,
                'hidden': false,
                'show':true,

              } );
              alert('未关注');
            }
          }
        })).catch(function(err) {
          console.log(err);
        })
      },
      changeProgress: function(total, leave) {
        var context = this;
        // console.log(total, leave);
        // console.log(parseFloat(total), parseFloat(leave));
        console.log((parseFloat(total) - parseFloat(leave)) / parseFloat(total) * 100 + '%');
        var use = (parseFloat(total) - parseFloat(leave)) / parseFloat(total) * 100;

        return {
          width: use.toFixed(2) + '%'
        };
      },
      changeColor: function(val) {
        var value = parseFloat(val) - 0;
        if (value > 0) {
          return "progress_bar";
        } else {
          return "progress_bar_no";
        }
        console.log(val);
      },

      animatePro: function(ele) {
        console.log('11');
        $(ele).addClass('slideInleft');
        console.log('22');
      }
    }
  });
</script>

</html>
